<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="categories">
      <!--添加分类按钮-->
      <el-button type="success" plain @click="showAddDialog">添加分类</el-button>
      <br><br>

      <!--表格-->
      <el-table
        v-loading="isLoading"
        :data="categoryList"
        row-key="cat_id">

        <el-table-column label="分类名称" prop="cat_name"></el-table-column>
        <el-table-column label="是否有效">
          <template v-slot:default="{ row }">
            {{ row.cat_deleted ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column label="层级" prop="cat_level"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="{ row }">
            <el-button size="small" plain type="primary" icon="el-icon-edit"></el-button>
            <el-button size="small" plain type="danger" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页-->
      <br>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[6, 12, 18, 24]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <!--添加分类对话框-->
      <el-dialog
        title="添加分类"
        :visible.sync="addVisible"
        width="40%">
        <el-form :rules="rules" ref="form" :model="form" label-width="80px">

          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="form.cat_name" placeholder="请输入分类名称"></el-input>
          </el-form-item>

          <el-form-item label="父级名称" prop="cat_pid">
            <el-cascader
              ref="cascader"
              clearable
              v-model="form.cat_pid"
              :options="options"
              :props="props"></el-cascader>
          </el-form-item>
        </el-form>

        <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button @click="addCategory" type="primary">确 定</el-button>
        </span>
        </template>
      </el-dialog>

    </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前页
      pagenum: 1,
      // 一页多少条
      pagesize: 6,
      // 后台返回的总数据
      categoryList: [],
      // 记录一个多少条
      total: 0,
      // 加载动画
      isLoading: false,
      // 显示隐藏对话框
      addVisible: false,
      // 对话框数据
      form: {
        // 保存获取到下拉菜单选中的值
        cat_pid: [],
        // 分类的名称
        cat_name: '',
        // 层级数据
        cat_level: ''
      },
      // 表单校验
      rules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: ['change', 'blur'] }
        ]
      },
      // 对话框后台返回的数据
      options: [],
      // 下拉菜单选择的配置
      props: {
        // 配置触发的方式, 为hover触发
        expandTrigger: 'hover',
        // value是将来要提交给后台的id
        value: 'cat_id',
        // 配置显示的文字
        label: 'cat_name',
        // 配置子集的展开属性名
        children: 'children',
        // 可以选中任意一级
        checkStrictly: true
      }
    }
  },
  created () {
    this.getCategoryList()
  },
  methods: {
    // 封装重新渲染函数
    async getCategoryList () {
      // 加载动画显示
      this.isLoading = true
      const res = await this.$axios.get(`categories`, {
        params: {
          type: 3,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      const { data, meta } = res
      if (meta.status === 200) {
        // 保存后台返回的数据
        this.categoryList = data.result
        // 记录一个多少条信息
        this.total = data.total
      } else {
        this.$message.error(meta.msg)
      }
      // 加载动画隐藏
      this.isLoading = false
    },

    // 分页
    handleSizeChange (val) {
      this.pagesize = val
      this.pagenum = 1
      this.getCategoryList()
    },
    handleCurrentChange (val) {
      this.pagenum = val
      this.getCategoryList()
    },

    // 显示添加对话框
    async showAddDialog () {
      // 显示对话框
      this.addVisible = true
      // 发送ajax请求, 获取到所有可供选择的一级和二级分类
      const res = await this.$axios.get('categories?type=2')
      const { meta, data } = res
      if (meta.status === 200) {
        // 保存后台返回的数据进行对话框下拉菜单的渲染
        this.options = data
      } else {
        this.$message.error(meta.msg)
      }
    },

    // 添加分类
    async addCategory () {
      try {
        // 表单校验
        await this.$refs.form.validate()
        const { cat_pid: catPid } = this.form
        const { meta } = await this.$axios.post(`categories`, {
          // 父id是数组的最后一项，如果没有，默认为0
          cat_pid: catPid[catPid.length - 1] || 0,
          cat_name: this.form.cat_name,
          cat_level: catPid.length
        })
        if (meta.status === 201) {
          this.$message.success(meta.msg)
          // 隐藏对话框
          this.addVisible = false
          // 重置表单
          this.$refs.form.resetFields()
          // 重新渲染
          this.getCategoryList()
        } else {
          this.$message.error(meta.msg)
        }
      } catch (e) {
        console.log(e)
      }
    }
  },
  watch: {
    // 监听只要数据进行点击了就隐藏对话框
    'form.cat_pid' (newValue) {
      this.$refs.cascader.dropDownVisible = false
    }
  }
}
</script>

<style scoped>

</style>
